<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
		<link rel="stylesheet" href="css/index.css">
		<script src="js/vue.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mycommon.js"></script>
		<style>
			*{
				margin: 0px;
			}
			body{
				background-image: url("img/p2nhjjp5pg2.jpg");
				background-repeat:no-repeat;
				background-size:100%;
				width: 100%;
				height: 100%;
			}
			.el-col{
				position: fixed;
				top: 230px;
				left: 520px;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<el-row :gutter="0">
				<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
					label-position="left">
					<el-col :span="6">
						<el-form-item label="用户名" prop="username">
							<el-input v-model="formData.username" placeholder="请输入用户名" clearable
								:style="{width: '100%'}">
							</el-input>
						</el-form-item>
						<el-form-item label="密码" prop="password">
							<el-input v-model="formData.password" placeholder="请输入密码" clearable show-password
								:style="{width: '100%'}"></el-input>
						</el-form-item>
						<el-form-item size="large">
							<el-button type="primary" @click="submitForm">登录</el-button>
							<el-button @click="resetForm">重置</el-button>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
		</div>
		<script>
			new Vue({
				el: "#box1",
				data: {
					formData: {
						username: undefined,
						password: undefined,
					},
					rules: {
						username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						}],
						password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						}],
					}
				},
				methods: {
					submitForm() {
						this.$refs['elForm'].validate(valid => {
							if (!valid) return
							// TODO 提交表单
							var that = this
							//ajax请求后端接口获取json数据
							axios.post(HTTP + "Login",that.formData).then(function(res) {
								//alert(JSON.stringify(res.data.data.userx1))
								//2、把后端获取的这个对象填充到表单里面进行修改
								if(res.data.code==200){
									that.$message("登录成功");
									//window.localStorage.getItem("jwtToken".res.data.data.jwtToken);
									window.location.href="index.html";
								}else{
									that.$message("登录失败");
								}
								
							}).catch(err => {
								console.log(err)
							});
						})
					},
					resetForm() {
						this.$refs['elForm'].resetFields()
					}
				}
			})
		</script>
	</body>
</html>